<template>
<view :class="['page',{'lock': isLock}]">
    <NoticeAndSwiper />
    <view class="filterBox">
        <nut-menu>
            <nut-menu-item v-model="evt.value1" :options="evt.options1" @change="handleChange" @open="openMenu" @close="closeMenu"/>
            <nut-menu-item v-model="evt.value2" :options="evt.options2" @change="handleChange" @open="openMenu" @close="closeMenu"/>
        </nut-menu>
    </view>
    <!-- 列表 -->
    <view class="ranklist">
        <view class="panel" v-for="item in list" :key="item.id">
            <view class="info">
                <image 
                    class="avatar" 
                    :src="decodeURIComponent(item.mini_avatar)"
                    :lazyLoad="true"
                />
                <view class="rightCon">
                    <!-- <view class="name">{{ item.mini_nickname }}</view> -->
                    <view class="name">{{ transPhone(item.phone) }}</view>
                    <view class="tagGroup">
                        <view class="lv">
                            <cdn-img src="/static/img/star/box.png" class="lv_bg" />
                            <view class="type fcenter">娱乐</view>
                            <view class="lv_num fcenter">等级{{ item.star_level }}</view>
                        </view>
                        <template v-if="item.tags">
                            <view 
                                :class="['tag','fcenter',i%2===0?'blue':'orange']" 
                                v-for="(tag,i) in JSON.parse(item.tags)" :key="i"
                            >{{ tag }}</view>
                        </template>
                    </view>
                    <!-- <view class="ell">接单区域：洛阳市，郑州市，开封，洛阳市</view> -->
                </view>
            </view>
            <view class="data">
                <view class="item">
                    <view class="num">{{ item.fans_num }}</view>
                    <view class="tit">粉丝数</view>
                </view>
                <view class="item">
                    <view class="num">{{ item.favour_num }}</view>
                    <view class="tit">获赞数</view>
                </view>
                <!-- <view class="item">
                    <view class="num">{{ item.fans_num }}</view>
                    <view class="tit">接单范围</view>
                </view>
                <view class="item">
                    <view class="num">{{ item.fans_num }}</view>
                    <view class="tit">累计播放量</view>
                </view> -->
            </view>
        </view>
        <template v-if="list.length>0">
            <nut-divider v-if="listStatus=='loading'">加载中...</nut-divider>
            <nut-divider v-else-if="listStatus=='nomore'">没有更多了</nut-divider>
        </template>
        <nut-empty description="暂无数据" v-else></nut-empty>
    </view>
</view>
</template>

<script setup>
import NoticeAndSwiper from '@/components/NoticeAndSwiper'
import { ref, reactive, onBeforeMount } from 'vue'
import { rankList } from '@/api/index'
import { transPhone } from '@/utils/helper'
import "./index.scss";

const emit = defineEmits(['toggle']);
const isLock = ref(false)
const evt = reactive({
    options1: [
        { text: '粉丝数量', value: null },
        { text: '0K-1K', value: [0, 1000] },
        { text: '1K-5K', value: [1000, 5000] },
        { text: '5K-1W', value: [5000, 10000] },
        { text: '1W-5W', value: [10000, 50000] },
        { text: '1W-5W', value: [50000, 99999999] },
    ],
    options2: [
        { text: '达人等级', value: null },
        { text: 'LV1', value: 'LV1' },
        { text: 'LV2', value: 'LV2' },
        { text: 'LV3', value: 'LV3' },
        { text: 'LV4', value: 'LV4' },
        { text: 'LV5', value: 'LV5' },
        { text: 'LV6', value: 'LV6' },
        { text: 'LV7', value: 'LV7' }
    ],
    value1: null,
    value2: null,
});
const listStatus = ref('loadmore');
const list = ref([])
let paging = { page: 1, size: 20 }
let total = 0

function queryList(){
    let parame = {...paging, level: evt.value2, fans: evt.value1}
    rankList(parame).then(res=>{
        if(res.meta){
            total = res.meta.last_page
        }
        if(res.data){
            list.value = list.value.concat(res.data)
        }
    })
}

onBeforeMount(()=>{
    queryList()
})

const loadMore = () => {
    if(paging.page >= total) return listStatus.value = 'nomore';
    listStatus.value = 'loading'
    if(paging.page < total){
        paging.page += 1;
        queryList()
    }
}

function handleChange(){
    list.value = []
    paging.page = 1
    queryList()
}
function openMenu(){
    isLock.value = true
}
function closeMenu(){
    isLock.value = false
}
defineExpose({
  loadMore,
})
</script>